<template>
  <div class="app">
    <el-row class="app_wrap">
      <el-col :span="3"><PageLeft></PageLeft></el-col>
      <el-col :span="21" class="app_body">
        <div>
          <h5 class="projectName">样式开发测试测试测试测试单</h5>
          <div class="userInfo">
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                <el-avatar :src="$fullUrl($banseUrl, UserInfo.avatar)">
                </el-avatar>
                <span
                  style="margin-left: 0.5rem; position: relative; top: -0.75rem"
                  >{{ UserInfo.nickname || UserInfo.username }}</span
                >
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="/home/info"
                    >修改资料</el-dropdown-item
                  >
                  <el-dropdown-item command="/home/password"
                    >修改密码</el-dropdown-item
                  >
                  <el-dropdown-item command="/quit" divided
                    >退出</el-dropdown-item
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <Breadcrumb />
        </div>

        <div class="space" />
        <div class="app_content">
          <router-view :key="$route.fullPath"></router-view>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>

import { $post, $get } from "@/api/Api.js";
import { ref, onMounted } from "vue";
import { $fullUrl, $banseUrl } from "@/utils/utils.js";
import PageLeft from "@/components/common/page_left.vue";
import Breadcrumb from "@/components/common/breadcrumb.vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import storageHelper from "@/libs/StorageHelper";
let UserInfo = storageHelper.getUserInfo();
let router = useRouter();
let store = useStore();
let sign_out = (payload) => store.commit("userStoreModule/sign_out", payload);

// 退出登录
let sign_out_fun = () => {
  sign_out([]);
  $get("/api/user/quit").then((res) => {
    store.commit("web/set_auth", []);
    sessionStorage.clear();
    localStorage.clear();
    router.push("/");
  });
};
// 切换菜单
let handleCommand = (command) => {
  if (command === "/quit") {
    sign_out_fun();
  } else {
    router.push(command);
  }
};
</script>
<style lang="less" scoped>
.el-tooltip__trigger:hover {
  border: none;
}
.app {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  .app_body,
  .app_wrap {
    height: 100%;
  }
  .userInfo {
    position: absolute;
    right: 10px;
    top: 1%;
    height: 80px;
    line-height: 80px;
    span {
      color: #fff;
    }
  }
  .projectName {
    font-size: 20px;
    position: absolute;
    left: 50%;
    color: #fff;
    height: 80px;
    line-height: 80px;
  }
  .app_content {
    height: calc(~"100% - 100px");
    overflow-y: auto;
  }
}
</style>
